<template>
  <el-card class="swiper-container">
    <template #header>
      <div class="header">
        <div class="search">
          <el-date-picker v-model="params.day_at"
            value-format="YYYY-MM-DD"
            type="daterange"
            @change="getList"
            start-placeholder="开始日期"
            end-placeholder="截止日期"
            :style="{
              width: '220px'
            }"/>
        </div>
        <el-button-group>
          <el-button type="warning">本页金额</el-button>
          <el-button><span class="user-number" style="font-size: 20px;">{{ state.currentPageMoneyTotal }}</span>元
          </el-button>
          <el-button type="primary">总计金额</el-button>
          <el-button><span class="money-total">{{ state.moneyTotal }}</span> 元</el-button>
        </el-button-group>
      </div>
    </template>
    <el-table class="table-row-optimize" ref="multipleTable" tooltip-effect="dark"
      v-loading="state.loading"
      :data="state.tableData"
      @selection-change="selectionChangeIds"
      style="width: 100%">
      <!--<el-table-column type="selection" width="45"/>-->
      <el-table-column prop="day_at" label="日期" align="center"/>
      <el-table-column label="金额" align="center">
        <template #default="scope">
          <span class="user-number">{{ scope.row.amount }}</span>
          <span class="user-units">元</span>
        </template>
      </el-table-column>
      <el-table-column label="记录时间" align="center">
        <template #default="scope">
          {{ toDateTime(scope.row.created_at) }}
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next, total"
      :total="state.total"
      :page-size="params.limit"
      :current-page="params.page"
      @current-change="changePage"
    />
  </el-card>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import { toDateTime } from "../../utils";
import { AdminBonusPoolList } from "../../api/server/bonus";

const state = reactive({
  loading: true,
  selectedIds: [],
  tableData: [],
  total: 0,
  moneyTotal: 0,
  currentPageMoneyTotal: 0,
})
const params = reactive({
  page: 1,
  limit: 10,
  day_at: ''
})

onMounted(() => {
  getList()
})

const changePage = (page) => {
  params.page = page
  getList()
}

const getList = async () => {
  state.loading = false
  const {
          data: {
            moneyTotal, currentPageMoneyTotal, items: { data, total, current_page }
          }
        } = await AdminBonusPoolList(params)
  state.moneyTotal = moneyTotal
  state.currentPageMoneyTotal = currentPageMoneyTotal
  state.tableData = data
  state.total = total
  params.page = current_page
  state.loading = false
}

const selectionChangeIds = (row) => {
  state.selectedIds = row
}
</script>

<style scoped>
:deep(.el-table .el-table__body-wrapper .el-table__cell) {
  padding-top: 18px;
  padding-bottom: 19px;
}

.user-number {
  font-size: 16px;
  color: var(--el-color-warning);
}

.user-units {
  font-size: 8px;
  color: var(--el-color-info-light-5);
}

.money-total {
  font-size: 20px;
  color: var(--el-color-danger);
}
</style>
